<script setup>
import { LineChart } from 'echarts/charts'
import { DatasetComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

import { ref } from 'vue'

defineProps({ option: Object })

// 由于目前 uni-app 对于 npm 插件的编译机制问题
// 小程序端的 npm 插件内部无法正确获取到业务侧的 echarts
// 所以需要手动将 echarts 提供给插件用于构建图表
// provideEcharts(echarts); // 🚨 注意：npm 方式需要添加这一行代码

// 此处仅用于演示通过 provide 修改图表 theme 的方式，不是必需
// provideEchartsTheme("dark");

echarts.use([
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  LineChart,
  CanvasRenderer,
  GridComponent,
])

// const option = ref({
//   legend: {
//     top: 10,
//     left: 'center',
//   },
//   tooltip: {
//     trigger: 'item',
//     textStyle: {
//       // #ifdef MP-WEIXIN
//       // 临时解决微信小程序 tooltip 文字阴影问题
//       textShadowBlur: 1,
//       // #endif
//     },
//   },
//   xAxis: {
//     type: 'category',
//     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//   },
//   yAxis: {
//     type: 'value',
//   },
//   series: [
//     {
//       data: [820, 932, 901, 934, 1290, 1330, 1320],
//       type: 'line',
//       smooth: true,
//     },
//   ],
// })
</script>

<template>
  <view class="h-80 rounded bg-white p-2 shadow">
    <uni-echarts :option="option" />
  </view>
</template>

<style scoped>
.chart {
  height: 7.9957rem;
}
</style>
